<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>登录页面</title>
    
	<meta http-equiv="pragma" content="no-cache">
	
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<link rel="stylesheet" href="css/style.css">
	<style>
	p{
	color:#fff;
	font-size:15px;
	text-shadow: 0 0 10px #529DFF;
	}
	</style>
	<style>
	*{
	  margin: 0;
	  padding: 0;
	}
	.bg{
	  background:url(1.jpg) no-repeat center center fixed;/* 与下面的blur_box:before中的background设置一样 */
	  width:100%;
	  height:100%;
	}
	.blur_box{
	  z-index: 0;/* 为不影响内容显示必须为最高层 */
	  position: relative;
	  overflow: hidden;
	}
	.blur_box:before{
	  content: "";/* 必须包括 */
	  position: absolute;/* 固定模糊层位置 */
	  width:300%;
	  height:300%;
	  left: -100%;/* 回调模糊层位置 */
	  top: -100%;/* 回调模糊层位置 */
	  background:url(1.jpg) no-repeat center center fixed;/* 与上面的bg中的background设置一样 */
	  filter: blur(20px);/* 值越大越模糊 */
	  z-index: -2;/* 模糊层在最下面 */
	}
	.rgba{
	  background-color: rgba(0, 0, 0, 0.2);/* 为文字更好显示，将背景颜色加深 */
	  position: absolute;/* 固定半透明色层位置 */
	  width:100%;
	  height:100%;
	  z-index: -1;/* 中间是rgba半透明色层 */
	}
	.content_text{
	  text-align: center;
	  color: rgba(255, 255, 255, 0.8);
	  padding: 50px 30px;
	  line-height: 28px;
	}
	article{
	  width:28%;
	  height:400px;
	  margin:200px auto;
	}
	.password{
    position: relative;
		}
	.password .n-txtCss{
    width:90% !important;
		}
	.password .fa{
    position: absolute;
    right: 10px;
    top:15px;
    font-size: 20px;
    cursor: pointer;
		}
	</style>
	<script type="text/javascript">
	
		
	</script>
  </head>
  
<body>



<div style="position: absolute;top: 500px;left: 50px">
 <canvas id="canvas" width="150px" height="50px"></canvas>
 </div>
<!-- 大背景 -->
<div class="wrap about_page" id="wrap">
  <div class="wrapper">
    <div class="header">
      <div class="head">
	  
          <div class="nav_box">
            <ul class="nav_list" id="nav_list">
		 
		 <li><a href="forgetpassword.jsp">忘记密码</a></li>
		 <li><a href="useradd.jsp">注册</a></li>
            </ul>
           
          </div>
      </div>
      <!-- 登录框 -->
      <div class="bg">
      
    	<article class="blur_box">
    		<div class="rgba" style="border-radius:12px"></div>

    	
    		
  			<input style="  position: absolute;box-sizing: border-box;bottom: 25em;left: 19%;width: 30em;height:50px;" type="text" placeholder="    账号"/>
  			<input datatype="*6-16" errormsg="密码范围在6~16位之间！" class="n-txtCss" style="  position: absolute;box-sizing: border-box;bottom: 18em;left: 19%;width: 30em;height:50px;" type="password" placeholder="    密码"/>
			<input style="  position: absolute;box-sizing: border-box;bottom: 11em;left: 19%;width: 15em;height:50px;" type="text" placeholder="    验证码"/>
			<input type="button" style="width:120px;height:50px;margin-top:307px;margin-left: 210px;border-radius:10px" value="登录" />
			







    	
    </article>
    </div>
    </div>
    <div class="events_sec" id="events_sec">
      <div class="content">
        
        <div class="events_list">
       
        </div>
      </div>
    </div>
    
    <div class="wage_sec" id="wage_sec">
      <div class="content">
 
      </div>
    </div>
    </div>
  </div>



<script>
var url=["",""];
var num = GetRandomNum(0,url.length-1);   
document.getElementById("audios").src="http://"+url[num];
function GetRandomNum(Min,Max)
{
var Range = Max - Min;   
var Rand = Math.random();   
return(Min + Math.round(Rand * Range));   
}   

function play(){
var div = document.getElementById('playbtn'); 
var obj=document.getElementById("audios");
if(obj.paused){
obj.play();
div.setAttribute("class", "btn_sound"); 
}else{
obj.pause();
div.setAttribute("class", "btn_sound btn_no_sound"); 
}

}
//yanzhengma

</script>
<script type="text/javascript">
$(".password").on("click",".fa-eye-slash",function(){
		$(this).removeClass("fa-eye-slash").addClass("fa-eye");
		$(this).prev().attr("type","text");
		});
		
		$(".password").on("click",".fa-eye",function(){
		$(this).removeClass("fa-eye").addClass("fa-eye-slash");
		$(this).prev().attr("type","password");
		});
		   //生成随机数
    function randomNum(min,max){
        return Math.floor(Math.random()*(max-min)+min);
    }
        //生成随机颜色RGB分量
    function randomColor(min,max){
        var _r = randomNum(min,max);
        var _g = randomNum(min,max);
        var _b = randomNum(min,max);
        return "rgb("+_r+","+_g+","+_b+")";
    }
    //先阻止画布默认点击发生的行为再执行drawPic()方法
    document.getElementById("canvas").onclick = function(e){
        e.preventDefault();
        drawPic();
    };
    function drawPic(){
        //获取到元素canvas
        var $canvas = document.getElementById("canvas");
        var _str = "0123456789";//设置随机数库
        var _picTxt = "";//随机数
        var _num = 4;//4个随机数字
        var _width = $canvas.width;
        var _height = $canvas.height;
        var ctx = $canvas.getContext("2d");//获取 context 对象
        ctx.textBaseline = "bottom";//文字上下对齐方式--底部对齐
        ctx.fillStyle = randomColor(180,240);//填充画布颜色
        ctx.fillRect(0,0,_width,_height);//填充矩形--画画
        for(var i=0; i<_num; i++){
            var x = (_width-10)/_num*i+10;
            var y = randomNum(_height/2,_height);
            var deg = randomNum(-45,45);
            var txt = _str[randomNum(0,_str.length)];
            _picTxt += txt;//获取一个随机数
            ctx.fillStyle = randomColor(10,100);//填充随机颜色
            ctx.font = randomNum(16,40)+"px SimHei";//设置随机数大小，字体为SimHei
            ctx.translate(x,y);//将当前xy坐标作为原始坐标
            ctx.rotate(deg*Math.PI/180);//旋转随机角度
            ctx.fillText(txt, 0,0);//绘制填色的文本
            ctx.rotate(-deg*Math.PI/180);
            ctx.translate(-x,-y);
        }
        for(var i=0; i<_num; i++){
            //定义笔触颜色
            ctx.strokeStyle = randomColor(90,180);
            ctx.beginPath();
            //随机划线--4条路径
            ctx.moveTo(randomNum(0,_width), randomNum(0,_height));
            ctx.lineTo(randomNum(0,_width), randomNum(0,_height));
            ctx.stroke();
        }
        for(var i=0; i<_num*10; i++){
            ctx.fillStyle = randomColor(0,255);
            ctx.beginPath();
            //随机画原，填充颜色
            ctx.arc(randomNum(0,_width),randomNum(0,_height), 1, 0, 2*Math.PI);
            ctx.fill();
        }
        return _picTxt;//返回随机数字符串
    }
    drawPic();
    </script>
<script src="js/canvas-nest.min.js"></script>

</body>  
</html>
